<template>
	<view class="item-container">
		<scroll-view scroll-x="true" class="scroll-y" @scrolltoupper="upper"
			:show-scrollbar="false"
			@scrolltolower="lower" @scroll="scroll" :scroll-left="scrollLeft">
			<view class="scroll-list">
				<view @tap="itemClick(item,index)" class="item" :class="{'on': index===tabIndex}" v-for="(item,index) in DEPTBYKEMULIST" :key="index">{{item.n}}</view>
			</view>
		</scroll-view>
		<view v-if="DEPTBYKEMULIST[tabIndex]" class="list-content">
			<template v-for="(item,index) in DEPTBYKEMULIST[tabIndex].s">
				<template v-if="(type=='2' && item?.charInfo?.[ctindex ===1 ? 'collectNum' : 'errorNum']>0) || (type!='2' && item?.charInfo?.num>0) || type=='1'">
					<view v-if="item.s.length==0" class="item">
						<view class="parent-item" :key="index">
							<view class="left"><view class="iconfont icon-fanhui"></view></view>
							<view class="text">第{{$common.numberToChinese(index+1)}}章  {{item.n}}</view>
							<view class="right">
								<view v-if="type=='2'" class="num">{{item?.charInfo?.[ctindex ===1 ? 'collectNum' : 'errorNum'] || 0}}道</view>
								<template v-else>
									<view class="num">{{item?.charInfo?.num || 0}}/{{item.num}}</view>
									<view class="line"><view class="on" :style="{'width': item.practiceNum/item.num*100+'%'}"></view></view>
								</template>
							</view>
						</view>
					</view>
					<template v-else>
						<view class="item">
							<view class="parent-item" @tap="parentItemClick(item,index)">
								<view class="left" :class="{'on': item.open}"><view class="iconfont icon-fanhui"></view></view>
								<view class="text">第{{$common.numberToChinese(index+1)}}章 {{item.n}}</view>
								<view class="right">
									<view v-if="type=='2'" class="num">{{item?.charInfo?.[ctindex ===1 ? 'collectNum' : 'errorNum'] || 0}}道</view>
									<template v-else>
										<view class="num">{{item?.charInfo?.num || 0}}/{{item.num}}</view>
										<view class="line"><view class="on" :style="{'width': (item?.charInfo?.num || 0) /item.num*100+'%'}"></view></view>
									</template>
								</view>
							</view>
							<view class="childer-list" :class="{'on': item.open}">
								<template v-for="(citem,cindex) in item.s">
									<view v-if="type=='2' && citem?.charInfo?.[ctindex ===1 ? 'collectNum' : 'errorNum']>0 || type!='2'" class="childer-item" :key="cindex" @click="goAccuracy(tabIndex,index,cindex,item,citem)">
										<view class="text">第{{$common.numberToChinese(cindex+1)}}节  {{citem.n}}</view>
										<view class="right">
											<view v-if="type=='2'" class="num">{{citem?.charInfo?.[ctindex ===1 ? 'collectNum' : 'errorNum'] || 0}}道</view>
											<template v-else>
												<view class="num">{{citem?.charInfo?.num || 0}} /{{citem.num}}</view>
												<view class="line"><view class="on" :style="{'width': (citem?.charInfo?.num || 0)/citem.num*100+'%'}"></view></view>
											</template>
										</view>
									</view>
								</template>
							</view>
						</view>
					</template>
				</template>
			</template>
		</view>
	</view>
</template>

<script>
import {getPracticeInfoByChar,getErrorAndCollectInfoByChar} from '@/api/index.js'
export default {
	data(){
		return {
			tabIndex: 0,
			scrollLeft: 0,
			charList2: [],
			charList3: [],
		}
	},
	watch:{
		tabIndex(newVal){
			if(newVal<2){
				this.scrollLeft=0
			}else if(this.DEPTBYKEMULIST.length-newVal<3){
				this.scrollLeft=this.DEPTBYKEMULIST.length*100
			}else{
				this.scrollLeft=newVal*70
			}
		}
	},
	props: {
		type: {
			type: String,
			default: '1'
		},
		mistakesList: {
			type: Array,
			default: () => ([])
		},
		ctindex: {
			type: Number,
			default: 0
		},
	},
	computed: {
		DEPTBYKEMULIST() {
			let list=this.$store.state.DEPTBYKEMULIST || [];
			list.map((item)=>{
				if(item.s.length>0){
					return {...item,open: false}
				}else{
					return item
				}
			})
			const tab=this.$store.state.questionDefaultTab;
			if(!this.$common.isEmpty(tab)){
				this.$store.commit('set', ['questionDefaultTab','']); 
				const index=list.findIndex(item=>item.n===tab);
				(index!==-1) && (this.tabIndex=index);
			}
			console.log(list,'----113')
			return list
		},
		questionDefaultTab() {
			return this.$store.state.questionDefaultTab;
		},
	},
	methods: {
		getPracticeInfoByChar(type,list){
			let pid2List = [];
			let pid3List = [];
			let params={};
			if(type=='2'){
				pid2List = this.DEPTBYKEMULIST
				  .filter(item => item?.s && item.s.length > 0)
				  .flatMap(item => item.s.map(citem => citem.v))
				  .filter(value => value != null);
				params={pid2ListStr: pid2List.toString()}
			}else if(type=='3'){
				pid3List = list
				  .flatMap(item => item.v)
				  .filter(value => value != null);
				params={pid3ListStr: pid3List.toString()}
			}
			if(this.$common.isEmpty(params.pid2ListStr) && this.$common.isEmpty(params.pid3ListStr)) return;
			getPracticeInfoByChar(params).then(res=>{
				this['charList'+type]=res.data;
				if(this.$common.isEmpty(res.data.length)) return;
				if(type=='2'){
					const idMap = new Map();
					for (let fitem of res.data) {
					    idMap.set(fitem.pid2, fitem);
					}
					console.log(idMap,'---idMap')
					for (let ditem of this.DEPTBYKEMULIST) {
					    if (!ditem.s?.length) continue;
					    for (let sitem of ditem.s) {
					        if (idMap.has(sitem.v)) {
					            sitem.charInfo = idMap.get(sitem.v);
					        }
					    }
					}
				}else if(type=='3'){
					const idMap = new Map();
					for (let fitem of res.data) {
					    idMap.set(fitem.pid2, fitem);
					}
					for (let ditem of list) {
						if (idMap.has(ditem.v)) {
							console.log(ditem,'---150')
							ditem.charInfo = idMap.get(ditem.v);
						}
					}
				}
				console.log(this.DEPTBYKEMULIST,'---155')
			})
		},
		goAccuracy(tabIndex,index,cindex,item,citem){
			this.$store.commit('set', ['question',[tabIndex,index,cindex]]);
			if(this.type=='2'){//收藏/错题页面
				this.$emit('selectCollect',item,citem)
			}else{
				this.$emit('accuracy',tabIndex,index,cindex,item,citem);
			}
		},
		itemClick(item,index){
			this.tabIndex=index;
		},
		parentItemClick(item,index){
			item.open=!item.open;
			if(item.open){
				if(item.s.length>0){
					if(this.type=='2'){
						this.getErrorAndCollectInfoByChar('3',item.s)
					}else{
						this.getPracticeInfoByChar('3',item.s)
					}
				}
			}
		},
		// 错题/收藏
		getErrorAndCollectInfoByChar(type,list){
			let pid2List = [];
			let pid3List = [];
			let params={};
			if(type=='2'){
				pid2List = this.DEPTBYKEMULIST
				  .filter(item => item?.s && item.s.length > 0)
				  .flatMap(item => item.s.map(citem => citem.v))
				  .filter(value => value != null);
				params={pid2ListStr: pid2List.toString()}
			}else if(type=='3'){
				pid3List = list
				  .flatMap(item => item.v)
				  .filter(value => value != null);
				params={pid3ListStr: pid3List.toString()}
			}
			params.type=this.ctindex===0 ? 2 : 1;//1收藏 2错题
			getErrorAndCollectInfoByChar(params).then(res=>{
				let charList=res.data.filter(item=>{
					if(params.type=='1'){//收藏
						return item.collectNum>0
					}else{//错题
						return item.errorNum>0
					}
				})
				this['charList'+type]=charList;
				if(this.$common.isEmpty(res.data.length)) return;
				if(type=='2'){
					const idMap = new Map();
					for (let fitem of charList) {
					    idMap.set(fitem.pid2, fitem);
					}
					for (let ditem of this.DEPTBYKEMULIST) {
					    if (!ditem.s?.length) continue;
					    for (let sitem of ditem.s) {
					        if (idMap.has(sitem.v)) {
					            sitem.charInfo = idMap.get(sitem.v);
					        }
					    }
					}
				}else if(type=='3'){
					const idMap = new Map();
					for (let fitem of res.data) {
					    idMap.set(fitem.pid2, fitem);
					}
					for (let ditem of list) {
						if (idMap.has(ditem.v)) {
							console.log(ditem,'---150')
							ditem.charInfo = idMap.get(ditem.v);
						}
					}
				}
				console.log(this.DEPTBYKEMULIST,'---155')
			})
		},
		scroll(){
			
		},
		upper(){
			
		},
		lower(){
			
		},
	}
}
</script>

<style scoped lang="scss">
	.scroll-y{
		border-bottom: 2rpx solid #F8F8F8;
	}
	.scroll-list{
		display: flex;
		padding: 28rpx 22rpx;
		color: #666;
		.item{
			margin-right: 26rpx;
			padding: 6rpx 14rpx;
			white-space: nowrap;
			background-color: #fff;
			border-radius: 26rpx;
			&:last-child{
				// padding-right: 50rpx;
			}
			&.on{
				color: #fff;
				background-color: #FF9813;
			}
		}
	}
	.list-content{
		.item{
			
		}
		.left,.right{
			flex-shrink: 0;
		}
		.left{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 26rpx;
			height: 26rpx;
			margin-right: 12rpx;
			border-radius: 50%;
			background-color: #E0E0E0;
			transition: transform .2s ease;
			.iconfont{
				transform: rotate(-90deg);
				font-size: 12rpx;
				color: #fff;
			}
			&.on{
				transform: rotate(180deg);
				background-color: #FF9813;
			}
		}
		.text{
			flex: 1;
			margin-right: 70rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #333;
		}
		.parent-item,.childer-item{
			display: flex;
			align-items: center;
			height: 92rpx;
			padding: 0 12rpx 0 36rpx;
			border-bottom: 2rpx solid #F8F8F8;
		}
		.right{
			.num{
				text-align: right;
				font-size: 16rpx;
				color: #626262;
			}
			.line{
				position: relative;
				width: 90rpx;
				height: 8rpx;
				overflow: hidden;
				background-color: #EFEFEF;
				border-radius: 4rpx;
			}
			.on{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				background-color: #48CA8C;
			}
		}
		.childer-list{
			height: 0;
			font-size: 26rpx;
			background-color: #F9F9F9;
			overflow: hidden;
			transition: height .3s ease;
			will-change: height;
			&.on{
				height: calc(var(--childer-height) * 92rpx);
			}
			.childer-item{
				padding-left: 74rpx;
				border-bottom: 2rpx solid #F1F1F1;
			}
			.line{
				width: 74rpx;
				height: 6rpx;
			}
		}
	}
</style>